<template>
  <div>nothing</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'MiningReport' })

const message = useMessage()

// 查询参数
const queryParams = reactive({
  dateRange: [
    new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
    new Date().toISOString().split('T')[0]
  ],
  reportType: 'daily'
})

// 报表数据
const reportData = ref({
  vehicleUtilization: 87.5,
  vehicleUtilizationTrend: 2.3,
  batteryChangeEfficiency: 156,
  batteryChangeEfficiencyTrend: 8.5,
  averageWaitingTime: 12,
  averageWaitingTimeTrend: -5.2,
  energySaving: 45.8,
  energySavingTrend: 15.6
})

const activeTab = ref('vehicle')

// 模拟数据
const vehicleReportData = ref([
  {
    vehicleNo: '京A12345',
    workHours: 8.5,
    mileage: 120,
    batteryChangeCount: 2,
    faultCount: 0,
    utilization: 85,
    energyConsumption: 45.2,
    efficiency: 4.5
  },
  {
    vehicleNo: '京A12346',
    workHours: 7.2,
    mileage: 98,
    batteryChangeCount: 1,
    faultCount: 1,
    utilization: 72,
    energyConsumption: 38.6,
    efficiency: 3.8
  },
  {
    vehicleNo: '京A12347',
    workHours: 9.1,
    mileage: 145,
    batteryChangeCount: 3,
    faultCount: 0,
    utilization: 91,
    energyConsumption: 52.3,
    efficiency: 4.8
  }
])

const platformReportData = ref([
  {
    platformName: 'A区1号换电平台',
    serviceCount: 45,
    averageWaitTime: 8,
    averageServiceTime: 25,
    utilization: 78,
    batteryConsumption: 120,
    faultTime: 0.5,
    efficiency: '优秀'
  },
  {
    platformName: 'A区2号换电平台',
    serviceCount: 38,
    averageWaitTime: 12,
    averageServiceTime: 28,
    utilization: 65,
    batteryConsumption: 98,
    faultTime: 2.1,
    efficiency: '良好'
  },
  {
    platformName: 'B区1号换电平台',
    serviceCount: 52,
    averageWaitTime: 6,
    averageServiceTime: 22,
    utilization: 89,
    batteryConsumption: 135,
    faultTime: 0,
    efficiency: '优秀'
  }
])

const taskReportData = ref([
  {
    date: '2024-01-15',
    totalTasks: 25,
    completedTasks: 23,
    canceledTasks: 2,
    completionRate: 92,
    averageResponseTime: 15,
    emergencyTasks: 3,
    satisfaction: 4.6
  },
  {
    date: '2024-01-16',
    totalTasks: 28,
    completedTasks: 26,
    canceledTasks: 2,
    completionRate: 93,
    averageResponseTime: 12,
    emergencyTasks: 2,
    satisfaction: 4.7
  },
  {
    date: '2024-01-17',
    totalTasks: 32,
    completedTasks: 30,
    canceledTasks: 2,
    completionRate: 94,
    averageResponseTime: 10,
    emergencyTasks: 4,
    satisfaction: 4.5
  }
])

// 图表配置
const vehicleUtilizationOptions = computed(() => ({
  title: { text: '车辆利用率趋势', left: 'center' },
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: { type: 'value', name: '利用率(%)' },
  series: [
    {
      name: '利用率',
      type: 'line',
      smooth: true,
      data: [82, 85, 88, 87, 89, 86, 90],
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(103, 194, 58, 0.6)' },
            { offset: 1, color: 'rgba(103, 194, 58, 0.1)' }
          ]
        }
      }
    }
  ]
}))

const batteryChangeOptions = computed(() => ({
  title: { text: '换电量统计', left: 'center' },
  tooltip: { trigger: 'axis' },
  legend: { data: ['换电次数', '平均时长'], top: 30 },
  xAxis: {
    type: 'category',
    data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
  },
  yAxis: [
    { type: 'value', name: '次数' },
    { type: 'value', name: '时长(分钟)' }
  ],
  series: [
    {
      name: '换电次数',
      type: 'bar',
      data: [2, 5, 12, 28, 35, 42]
    },
    {
      name: '平均时长',
      type: 'line',
      yAxisIndex: 1,
      data: [25, 22, 28, 24, 26, 23]
    }
  ]
}))

const faultTypeOptions = computed(() => ({
  title: { text: '故障类型分布', left: 'center' },
  tooltip: { trigger: 'item' },
  series: [
    {
      type: 'pie',
      radius: '60%',
      data: [
        { value: 35, name: '电池故障' },
        { value: 25, name: '机械故障' },
        { value: 20, name: '通信故障' },
        { value: 15, name: '软件故障' },
        { value: 5, name: '其他' }
      ]
    }
  ]
}))

const energyConsumptionOptions = computed(() => ({
  title: { text: '能耗分析', left: 'center' },
  tooltip: { trigger: 'item' },
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      data: [
        { value: 40, name: '作业能耗' },
        { value: 25, name: '行驶能耗' },
        { value: 20, name: '待机能耗' },
        { value: 15, name: '其他能耗' }
      ]
    }
  ]
}))

const teamEfficiencyOptions = computed(() => ({
  title: { text: '车队效率对比', left: 'center' },
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: ['A区挖掘队', 'A区运输队', 'B区挖掘队', 'B区运输队', 'C区综合队']
  },
  yAxis: { type: 'value', name: '效率分数' },
  series: [
    {
      name: '效率分数',
      type: 'bar',
      data: [85, 78, 92, 88, 82],
      itemStyle: {
        color: function (params) {
          const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']
          return colors[params.dataIndex]
        }
      }
    }
  ]
}))

/** 生成报表 */
const generateReport = () => {
  message.success('报表生成成功')
}

/** 导出报表 */
const exportReport = () => {
  message.success('报表导出成功')
}

/** 获取效率等级类型 */
const getEfficiencyType = (efficiency: string) => {
  const types = { 优秀: 'success', 良好: 'primary', 一般: 'warning', 较差: 'danger' }
  return types[efficiency] || 'info'
}
</script>

<style lang="scss" scoped>
.mining-report {
  .report-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

    .card-header {
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      .card-icon {
        font-size: 24px;
        color: #409eff;
        margin-right: 8px;
      }

      .card-title {
        font-size: 14px;
        color: #666;
        font-weight: 500;
      }
    }

    .card-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .card-number {
        font-size: 28px;
        font-weight: bold;
        color: #303133;
      }

      .card-trend {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #f56c6c;

        &.trend-up {
          color: #67c23a;
        }

        .el-icon {
          margin-right: 2px;
        }
      }
    }
  }

  .chart-header {
    padding: 0 20px 10px;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 20px;

    h3 {
      margin: 0;
      font-size: 16px;
      color: #303133;
      font-weight: 500;
    }
  }

  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px 20px;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 20px;

    h3 {
      margin: 0;
      font-size: 16px;
      color: #303133;
      font-weight: 500;
    }
  }
}
</style>
